<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>MuLinson.ShowTime</title>
	<style type="text/css">
		body{
			font-family: '微软雅黑';
			background-color: #1f1f1f;
		}
		.header{
			text-align: center;
			width: 300px;
			height: 80px;
			margin: 25px auto;
			color: #fff;
		}
		.header>h2{
			line-height: 35px;
			border-bottom: 1px solid #fff;
			margin-bottom: 15px;
		}
		.header>a{
			font-size: 18px;
			color: #fff;
			text-decoration: none;
		}
		.header>a:hover{
			color: #f36896;
		}
		*{
			margin: 0;
			padding: 0;
		}
		.demo{
			padding: 2em 0;
			background-image: url(img/bck.jpg);
			background-repeat: no-repeat;
			background-size: cover;
		}
		.container{
			position: relative;	
			width: 1040px;
			background-color: rgba(255,255,255,.5);
			margin-left: auto;
			margin-right: auto;
			padding: 45px 120px;
		}
		.row{
			position: relative;	
/*			padding: 145px;*/
			height: 693px;
			width: 1040px;
			overflow: hidden;
			margin: 10px auto;	
		}
		#showPho{
			position: absolute;
			
			width: 7280px;
			height: 693px;
		}
		.img{
			float: left;
			background-color: #fff;
			vertical-align: top;
		}
		.button{
			text-decoration: none;
			cursor: pointer;
			display: block;	
			color: #fff;
			text-align: center;	
			position: absolute;
			font-size: 60px;
			border-radius: 25px;
			top: 360px;
			height: 80px;
			width: 80px;
			z-index: 3;
			background-color: rgba(0,0,0,.3);
		}
		#pre{
			left: 20px;
		}
		#next{
			right: 20px;
		}
		.button:hover{
			background-color: rgba(0,0,0,0.5);
			color: #f36896; 
		}
		#list{
			position: absolute;
			left: 50%;
			margin-left: -38px;
		}
		#list>.current{
			background-color: #f36896;
		}
		#list>span{
			display: inline-block;
			height: 10px;
			width: 10px;
			background-color: rgba(0,0,0,.3);
			border: 1px solid #fff;
			border-radius: 50%;
			cursor: pointer;
		}
	</style>
<script type="text/javascript">
	window.onload = function(){
		var showPho	= document.getElementById('showPho');
		var list = document.getElementById('list').getElementsByTagName('span');
		var pre	= document.getElementById('pre');
		var next = document.getElementById('next');
		var index = 1;
		var timer;
		var animated = false;

		function animate(offset){

			if(offset == 0){
				return;
			}

			animated = true;
			var time = 300;
			var interval = 15;
			var speed = offset/(time/interval);
		    var nowleft = parseInt(showPho.style.left) + offset;

		    function go (){
		    	if( (speed > 0 && parseInt(showPho.style.left) < nowleft) || 
		    		(speed < 0 && parseInt(showPho.style.left) > nowleft) ) {
		    		showPho.style.left  = parseInt(showPho.style.left) + speed + 'px';
		    		setTimeout(go,interval);

		    	} else {
		    		animated = false;
				    showPho.style.left = nowleft + 'px';
				    if(nowleft	> -1040) {
				    	showPho.style.left	= -5200 + 'px';
				    }
				    if (nowleft < -5200) {	
				    	showPho.style.left = -1040 + 'px';
				    }
		    	}
			}
	    	go();
		}

		function showButton(){

			for(var i = 0;i<list.length;i++){
				if(list[i].className == 'current'){
					list[i].className = '';
				}
			}
			list[index-1].className = 'current';

		}

		function play (){

			timer = setInterval(function(){
				next.onclick();
			},3000);

		}

		// function stop(){
		// 	clearTimeout(timer);
		// }

		pre.onclick = function(){
			if(index == 1){
				index = 5;
			} else {
				index -= 1;
			}
			
			showButton();
			if(animated == false){
				animate(1040);
			}
		}

		next.onclick = function(){
			if(index == 5){
				index = 1;
			}else {
				index += 1;
			}
			
			showButton();
			if(animated == false){
				animate(-1040);
			}
		}
        
		for(var i = 0;i<list.length;i++){
			list[i].onclick = function(){

				if(this.className == 'current'){
					return;
				}
				var myIndex = parseInt(this.getAttribute('index'));
				offset = -1040 *(myIndex - index);
				
				index = myIndex;
				showButton();
				if(animated == false){
					animate(offset);
				}
			}
		}

		// container.nmouseover = stop;
		// container.onmouseout = play;

		play();

	}	
</script>
</head>
<body>
	<div class="demo">
		<div class="header">
			<h2>MuLinson.showTime</h2>
			<a href="../index.html">Back</a>
		</div>
		<div class="container">
			<div class="row">
				<div id="showPho" style="left:-1040px;">
					<img src="img/pic5.jpg" class="img">
					<img src="img/pic2.jpg" class="img">
 					<img src="img/pic1.jpg" class="img">
					<img src="img/pic3.jpg" class="img">
					<img src="img/pic4.jpg" class="img">
					<img src="img/pic5.jpg" class="img">
					<img src="img/pic2.jpg" class="img">
				</div>
			</div>
			<a href="##" class="button" id="pre">&lt</a>
			<a href="##" class="button" id="next">&gt</a>
			<div id="list">
				<span index="1" class="current"></span>
				<span index="2"></span>
				<span index="3"></span>
				<span index="4"></span>
				<span index="5"></span>
			</div>
		</div>
	</div>
</body>

</html>